<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-hello></my-hello>

        <!-- 此处无法访问my-world组件，只能在my-hello组件内部访问 -->
        <!-- <my-world></my-world> -->

    </div>

    <template id="hello">
        <div>
            <h3>我是hello父组件</h3>
            <h3>访问自己的数据：{{ msg }}</h3>
            <h3>访问子组件的数据：{{ sex }}</h3>
            <button @click="changeMsg">修改msg</button>
            <hr>

            <!-- 监听子组件触发的事件 -->
            <my-world :message="msg" :name="name" @e-world="getData"></my-world>
        </div>
    </template>

    <template id="world">
        <div>
            <h4>我是world子组件</h4>
            <h4>访问自己的数据：{{ sex }}</h4>
            <h4>访问父组件的数据：{{ message }}, {{ name }}, {{ age }}</h4>
        </div>
    </template>

    <script>
        // 根组件
        new Vue({
            el: '#app',
            components: {
                'my-hello': { // 父组件
                    template: '#hello',
                    data(){
                        return {
                            msg: 'welcome',
                            name: 'tom',
                            age: 20,
                            sex: ''
                        }
                    },
                    methods: {
                        changeMsg(){
                            this.msg = '欢迎'
                        },
                        getData(sex){
                            this.sex = sex
                        }
                    },
                    components: {
                        'my-world': { // 子组件
                            template: '#world',
                            data(){
                                return {
                                    sex: 'male'
                                }
                            },
                            props: {
                                message: String,
                                name: String,
                                age: {
                                    type: Number,
                                    default: 18
                                }
                            },
                            created(){
                                // 触发事件，父向组件传递数据
                                this.$emit('e-world', this.sex)
                            }
                        }
                    }
                },
                'aaa': {

                }
            }
        })
    </script>
</body>
</html>